<script setup>
import { ref, onMounted } from "vue";
import { useDepartmentStore } from "@/stores/department";
import { useRoleStore } from "@/stores/role";
import { useAuthStore } from "@/stores/auth";
import Header from "./Header.vue";
import Sidebar from "./Sidebar.vue";

const collapsed = ref(false);
const departmentStore = useDepartmentStore();
const roleStore = useRoleStore();
const authStore = useAuthStore();

// 初始化基础数据（部门和角色）
onMounted(async () => {
  try {
    // 只有在用户已登录的情况下才加载部门和角色数据
    if (authStore.isLoggedIn) {
      // 并行加载部门和角色数据
      await Promise.all([
        departmentStore.loadAllDepartments(),
        roleStore.loadAllRoles(),
      ]);
    }
  } catch (error) {
  }
});

const toggleSidebar = () => {
  collapsed.value = !collapsed.value;
};
</script>

<template>
  <div class="layout-container">
    <Header @toggle-sidebar="toggleSidebar" />
    <div class="main-content">
      <Sidebar :collapsed="collapsed" />
      <div class="content-wrapper">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
.layout-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
  transition: all 0.3s ease;
}
</style>
